<template>
  <el-card shadow="navar">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
        <el-col :span="12">
          <el-form-item label="活动标题" prop="activeTitle">
            <el-input
              v-model.trim="formData.activeTitle"
              :disabled="disabled"
              placeholder="请输入活动标题"
              :maxlength="50"
              show-word-limit
              clearable
              prefix-icon="el-icon-activeTitle"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动状态" prop="activeStuta">
            <el-select
              v-model="formData.activeStuta"
              :disabled="disabled"
              placeholder="请选择活动状态"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in activeStutaOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动门店/部门" prop="activityStore">
            <el-select
              v-model="formData.activityStore"
              :disabled="disabled"
              placeholder="请选择活动门店/部门"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in activityStoreOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane label="活动数据" name="active">
              <el-row :gutter="15">
                <el-col :span="4">
                  <p>访问次数</p>
                  <p>100</p>
                </el-col>
                <el-col :span="4">
                  <p>访客数量</p>
                  <p>100</p>
                </el-col>
                <el-col :span="4">
                  <p>新客户总购买人数</p>
                  <p>100</p>
                </el-col>
                <el-col :span="4">
                  <p>老客户总购买人数</p>
                  <p>100</p>
                </el-col>
                <el-col :span="4">
                  <p>今日成交订单数</p>
                  <p>100</p>
                </el-col>
                <el-col :span="4">
                  <p>总成交订单数</p>
                  <p>100</p>
                </el-col>
                <el-col :span="4">
                  <p>新客户转化购买率</p>
                  <p>100</p>
                </el-col>
                <el-col :span="4">
                  <p>老客户转化购买率</p>
                  <p>100</p>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="24">
          <el-tabs
            v-model="userName"
            type="border-card"
            style="margin: 20px 0px"
          >
            <el-tab-pane label="已购买客户" name="purchaseName">
              <el-form :model="queryParams" :inline="true" label-width="0px">
                <el-form-item>
                  <el-input
                    v-model="queryParams.schemeName"
                    style="width: 300px"
                    placeholder="请输入客户姓名/客户性质/手机号"
                    clearable
                    size="small"
                    @keyup.enter.native="getList"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="getList"
                    >查询</el-button
                  >
                  <el-button icon="el-icon-refresh" size="mini" @click="reset"
                    >重置</el-button
                  >
                </el-form-item>
              </el-form>
              <el-table v-loading="purchase.loading" :data="purchase.list">
                <el-table-column
                  min-width="140"
                  label="微信头像"
                  align="center"
                  prop="activeTitle"
                />
                <el-table-column
                  min-width="80"
                  label="微信昵称"
                  align="center"
                  prop="activeStuts"
                />
                <el-table-column
                  min-width="140"
                  label="客户姓名"
                  align="center"
                  prop="activeStore"
                />
                <el-table-column
                  min-width="140"
                  label="手机号"
                  align="center"
                  prop="activeStartTime"
                />
                <el-table-column
                  min-width="140"
                  label="客户性质"
                  align="center"
                  prop="activeEndTime"
                />
                <el-table-column
                  min-width="140"
                  label="消费总金额/元"
                  align="center"
                  prop="seckillPrice"
                  sortable
                />
                <el-table-column
                  min-width="140"
                  label="消费次数/次"
                  align="center"
                  prop="outNum"
                  sortable
                />
                <el-table-column
                  min-width="140"
                  label="手机型号"
                  align="center"
                  prop="inventoryNum"
                />
                <el-table-column
                  min-width="140"
                  label="最新支付时间"
                  align="center"
                  prop="cerateDepartment"
                  sortable
                />
              </el-table>
              <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </el-tab-pane>
            <el-tab-pane label="浏览客户" name="seeName"> </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-form>
    </el-row>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      disabled: true,
      activeName: 'active',
      userName: 'purchaseName',
      activeStutaOption: [
        {
          label: '进行中',
          value: 0,
        },
        {
          label: '其他',
          value: 1,
        },
      ],
      activityStoreOption: [
        {
          label: '默认门店',
          value: 0,
        },
        {
          label: '门店1',
          value: 1,
        },
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        schemeName: null,
      },
      total: 1,
      purchase: {
        list: [],
        loading: false,
      },

      formData: {
        activeTitle: null,
        activeStuta: 0,
        activityStore: 0,
      },
    }
  },
  created() {
    this.handleActiveInit()
    // this.getList()
  },
  mounted() {},
  methods: {
    handleActiveInit() {
      console.log(this.$route.params.id)
    },
    /** 查询租户管理列表 */
    getList() {
      this.loading = true
      getSeckillList(this.queryParams).then((response) => {
        this.purchase.list = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 表单重置
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        schemeName: null,
      }
      // this.getList()
    },
  },
}
</script>
